<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>表⽩墙</title>
    <style>
*{
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 0 auto;
}
h1 {
text-align: center;
padding: 20px 0;
}
p {
color: #666;
text-align: center;
font-size: 14px;
padding: 10px 0;
}
.row {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 100px;
line-height: 40px;
}
.edit {
width: 200px;
height: 30px;
}
.submit {
width: 304px;
height: 40px;
color: white;
background-color: orange;
border: none;
}
.submit:active {
background-color: #666;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="container" class="container">
    <h1>表⽩墙</h1>
    <p>输⼊后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input id="from" class="edit" type="text">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input id="to" class="edit" type="text">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input id="message" class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit" onclick="mySubmit()">
    </div>
    <div id="allMsg">
        <!-- <div class="row">
            ⼩猫对⼩狗说: 喵
        </div>
        <div class="row">
            ⼩⿊对⼩⽩说: 拜拜。
        </div> -->
    </div>
</div>
<script>
    function mySubmit(){
        var from=jQuery("#from");
        var to=jQuery("#to");
        var msg=jQuery("#message");
        jQuery.ajax({
            url:"message/add",
            type:"POST",
            data:{
                from:from.val(),
                to:to.val(),
                msg:msg.val()
            },  //前端传给后端的参数
            success:function(result){   //后端传给前端的参数
                if(result!=null && result>0){
                    alert("恭喜,添加成功");
                    //刷新表白列表
                    getAllMsg();
                }else{
                    alert("抱歉，添加失败");
                }
            }
        });
    }
        function getAllMsg(){
            jQuery.ajax({
                url:"message/list",
                type:"GET",
                data:"",
                success:function(result){
                    if(result!=null && result.length>0){
                        //有表白数据
                        var msgHtml ="";
                        for(var i=0;i<result.length;i++){
                            msgHtml+='<div class="row">'+
                                result[i].from+"对"+
                                result[i].to+"说"+
                                result[i].message +
                                '</div>';
                        }
                        jQuery("#allMsg").html(msgHtml);
                    }else if(result!=null && result.length==0){
                        //没有表白信息
                        console.log("没有表白信息");
                    }else{
                        alert("访问出错");
                    }
                }
            });
        }
    getAllMsg();
</script>

</body>
</html>